<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类页面</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/classify.css">
    <script src="../js/request.js"></script>
    <script src="../companets/navBar/index.js"></script>
    <script src="../js/loading.js"></script>
    <script src="../js/underscore.js"></script>
    <style>
        .classificationBox {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- 头部 -->
        <div class="head">
            <div class="head_top width clearfix">
                <img src="../images/logo.png">
                <div class="search_nav right">
                    <input type="text" placeholder="请输入想要的商品" value="">
                    <button id="search">搜索</button>
                </div>
            </div>
            <div class="head_dw width clearfix">
                <ul class="nologin">
                    <li><a href="../index.html">首页</a></li>
                    <li><a href="../view/login.html">登录</a></li>
                    <li><a href="../view/register.html">注册</a></li>
                </ul>
                <ul class="login">
                    <li><a href="../index.html">首页</a></li>
                    <li><a href="../view/shopCar.html">购物车</a></li>
                    <li><a href="./login.html" id="quit">退出登录</a></li>
                </ul>
                <div class="search_nav right mar">
                    <input type="text" placeholder="请输入想要的商品" value="">
                    <button id="search">搜索</button>
                </div>
            </div>
        </div>
        <!-- 一级分类 -->
        <ul class="classifyList width"></ul>
        <!-- 商品 -->
        <div class="goods clearfix"></div>
        <!-- 返回顶部 -->
        <div class="returnTop">
            <img src="../images/上箭头.png">
        </div>
    </div>
    <ul class="type-two"></ul>

</body>
<script>
    var classifyUl = document.querySelector(".classifyList");
    var products = document.querySelector(".goods");
    var uls = document.querySelector(".type-two");
    var typeOne = localStorage.getItem("typeOne");

    getSecond(typeOne);
    // 一级分类
    REQUEST.get("/getTypeone", {}, function (data) {
        for (var i = 0; i < data.length; i++) {
            var li = document.createElement("li");
            li.innerHTML = data[i];
            classifyUl.appendChild(li);
            li.addEventListener("click", function () {
                for (var i = 0; i < classifyUl.children.length; i++) {
                    classifyUl.children[i].className = "";
                    this.className = "liactive";
                }
            })
        }

        //二级分类楼层
        var lis = document.querySelectorAll(".classifyList li");
        lis.forEach(function (item) {
            item.onclick = function () {
                uls.innerHTML = "";
                products.innerHTML = "";
                var prodata = item.innerHTML;
                getSecond(prodata);
            }
        })

    })

    //渲染商品
    function getSecond(stage) {
        var loader = createLoading({
            src: '../images/loading.jpg',
        }).show();
        REQUEST.get("/search", {
            params: {
                word: stage,
            }
        }, function (data) {
            var arr = [];
            for (var j = 0; j < data.length; j++) {
                var item = data[j].type_two;
                arr.push(item);
            }
            // 数组去重
            var res = [...new Set(arr)];
            for (let k = 0; k < res.length; k++) {
                //渲染侧边栏
                var li = document.createElement("li");
                if (k == 0) {
                    li.classList.add("fontcolor");
                }
                li.innerHTML = res[k];
                uls.appendChild(li);
                // 渲染二级标题
                let h2 = document.createElement("h2");
                h2.innerHTML = res[k];
                products.appendChild(h2);
                // 渲染二级分类商品
                var div1 = document.createElement("div");
                div1.className = "classificationBox";
                var html = ''
                for (let m = 0; m < data.length; m++) {
                    var productItem = data[m];
                    if (res[k] == data[m].type_two) {
                        html += `
                                <div class="list left" data-id="${productItem.Id}">
                                    <img src="../images/loading.jpg" data-src="${productItem.img_list_url}" >
                                    <h3>${productItem.title}</h3>
                                    <div class="list-dw clearfix">
                                        <span class="price left">${productItem.price}</span>
                                        <div class="mack right">${productItem.mack}</div>
                                    </div>
                                </div>
                                `
                        div1.innerHTML = html;
                    }
                }
                products.appendChild(div1);
                linkDetail();

                //懒加载
                var imgs = document.querySelectorAll(".list>img");
                imgs = Array.from(imgs);
                window.onscroll = function (e) {
                    setTimeout(function () {
                        lazy(imgs);
                    }, 2000);
                }
                lazy(imgs);
                function lazy(imgs) {
                    for (var i = 0; i < imgs.length; i++) {
                        var height = imgs[i].offsetTop;
                        var wheight = window.innerHeight;
                        var sheight = document.documentElement.scrollTop;
                        if (height <= wheight + sheight) {
                            imgs[i].src = imgs[i].dataset.src;
                        }
                    }
                }

                //楼层滚动
                var classificationH = document.querySelectorAll(".goods h2")
                var categoryLi = document.querySelectorAll(".type-two li")
                window.addEventListener("scroll", function (e) {
                    for (let i = 0; i < classificationH.length; i++) {
                        var sheight = document.documentElement.scrollTop;
                        if (classificationH[i].offsetTop <= sheight+150) {
                            for (let j = 0; j < categoryLi.length; j++) {
                                categoryLi[j].classList.remove("fontcolor");
                            }
                            categoryLi[i].classList.add("fontcolor");
                        }
                    }
                })

                // 侧边栏跳转
                categoryLi.forEach(function (item, index) {
                    item.onclick = function () {
                        for (let j = 0; j < categoryLi.length; j++) {
                            categoryLi[j].classList.remove("fontcolor");
                        }
                        categoryLi[index].classList.add("fontcolor");
                        document.documentElement.scrollTop = classificationH[index].offsetTop-150;
                    }
                })

                //
                setTimeout(() => {
                    loader.hide();
                }, 500);
            }
        })
    }

    // 跳转到详情页
    function linkDetail() {
        var item = document.querySelectorAll('.list');
        for (var i = 0; i < item.length; i++) {
            (function (i) {
                item[i].onclick = function () {
                    var id = item[i].getAttribute('data-id');
                    location.href = `./detail.html?goodId=${id}`
                }
            })(i);
        }
    }


    //
    //固定导航栏
    fixedD();
    // 搜索功能
    Search();

    // 返回顶部
    reTop();
    // 验证登录
    checkLogin();

</script>

</html>